<template>
  <div>
    <!-- header -->
    <div class="wire-header">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ name: 'proj' }">项目管理</el-breadcrumb-item>
        <el-breadcrumb-item>导线管理</el-breadcrumb-item>
        <el-breadcrumb-item>{{ projState.proj?.name }}</el-breadcrumb-item>
      </el-breadcrumb>

      <el-button type="primary" @click="addVisible = true">新增</el-button>
    </div>

    <!-- table -->
    <el-table :data="wireState.wires" style="width: 100%" border class="wire-table">
      <el-table-column type="index" label="序号" width="80" align="center" />

      <el-table-column prop="id" label="导线编号" align="center" />
      <el-table-column prop="name" label="导线名称" align="center" />
      <el-table-column prop="type" label="导线类型" align="center" />
      <el-table-column prop="long" label="长度" align="center" />
      <el-table-column prop="show" label="展放长度" align="center" />
      <el-table-column prop="remain" label="剩余长度" align="center" />

      <el-table-column label="操作" width="150">
        <template #default="scoped">
          <el-button-group>
            <el-button type="primary"> 编辑 </el-button>
            <el-button type="danger" @click="del(scoped.row)"> 删除 </el-button>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>
  </div>

  <AddWireDialog v-model="addVisible" @closed="addVisible = false" />
</template>

<script setup lang="ts">
import AddWireDialog from '@/components/wire/AddWireDialog.vue'
import useProjStore from '@/states/useProjStore'
import useWireState from '@/states/useWireStore'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ref } from 'vue'
import { useRoute } from 'vue-router'

const addVisible = ref(false)
const wireState = useWireState()
const projState = useProjStore()
const route = useRoute()

async function del(row: WireModel) {
  await ElMessageBox.confirm(`是否删除${row.id}#导线?`, '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(async () => {
      await wireState.del(row.id!)
      ElMessage({
        type: 'success',
        message: '成功删除',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '删除已取消',
      })
    })

  await wireState.all({ projId: +route.params.id })
}

projState.find(+route.params.id)
wireState.all({
  projId: +route.params.id,
})
</script>

<style lang="scss" scoped>
.wire-header {
  @apply flex justify-between items-center;
}
.wire-table {
  @apply mt-5;
}
</style>

<script lang="ts">
export default {
  route: {
    name: 'wire',
    path: 'home/wire/:id',
  },
}
</script>
